<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <link href="css/bootstrap4x.css" rel="stylesheet"/>
    <link href="css/index.css" rel="stylesheet">
    <link href="css/common.css" rel="stylesheet">
    <link href="//at.alicdn.com/t/font_3316096_z1qyfcob3y.css" rel="stylesheet" type="text/css"/>
    <title>首页-图书管理系统</title>
</head>
<body>
<div class="container main">
    <div id="page_head"></div>
    <!--    <div class="title-box">网站公告</div>-->
    <!--    <div class="banner">-->
    <!--        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">-->
    <!--            <div class="carousel-indicators">-->
    <!--                <button type="button" data-target="#carouselExampleIndicators" data-slide-to="0" class="active"-->
    <!--                        aria-current="true" aria-label="Slide 1"></button>-->
    <!--                <button type="button" data-target="#carouselExampleIndicators" data-slide-to="1"-->
    <!--                        aria-label="Slide 2"></button>-->
    <!--                <button type="button" data-target="#carouselExampleIndicators" data-slide-to="2"-->
    <!--                        aria-label="Slide 3"></button>-->
    <!--            </div>-->
    <!--            <div class="carousel-inner">-->
    <!--                <div class="carousel-item active banner-img">-->
    <!--                    <img src="img/os.jpg" class="d-block w-100" alt="...">-->
    <!--                </div>-->
    <!--                <div class="carousel-item banner-img">-->
    <!--                    <img src="img/2.jpg" class="d-block w-100" alt="...">-->
    <!--                </div>-->
    <!--                <div class="carousel-item banner-img">-->
    <!--                    <img src="img/3.jpg" class="d-block w-100" alt="...">-->
    <!--                </div>-->
    <!--            </div>-->
    <!--            <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators"-->
    <!--                    data-slide="prev">-->
    <!--                <span class="carousel-control-prev-icon" aria-hidden="true"></span>-->
    <!--                <span class="visually-hidden">Previous</span>-->
    <!--            </button>-->
    <!--            <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators"-->
    <!--                    data-slide="next">-->
    <!--                <span class="carousel-control-next-icon" aria-hidden="true"></span>-->
    <!--                <span class="visually-hidden">Next</span>-->
    <!--            </button>-->
    <!--        </div>-->
    <!--    </div>-->
    <div class="title-box" id="book_intro">
        <i class="iconfont icon-tuijian"></i>
        <span>热门推荐</span>
    </div>
    <div class="book-area">
        <div class="row">
            <div class="col-md-8">
                <div class="book-box">
                    <div class="book-item">
                        <div class="book-cover">
                            <img src="img/book.png"/>
                        </div>
                        <div class="book-info">
                            <span class="book-title">盗墓笔记</span>
                            <div class="author">南派三叔</div>
                            <p>南派三叔经典作品，讲述了盗墓的故事，深受读者的喜爱，我相信每个男孩子都会喜欢这本小说的。</p>
                            <div class="like">
                                <i class="iconfont icon-Like"></i>666
                            </div>
                        </div>
                    </div>
                    <div class="book-item">
                        <div class="book-cover">
                            <img src="img/book.png"/>
                        </div>
                        <div class="book-info">
                            <span class="book-title">盗墓笔记</span>
                            <div class="author">南派三叔</div>
                            <p>南派三叔经典作品，讲述了盗墓的故事，深受读者的喜爱，我相信每个男孩子都会喜欢这本小说的。</p>
                            <div class="like">
                                <i class="iconfont icon-Like"></i>666
                            </div>
                        </div>
                    </div>
                </div>
                <div class="book-box">
                    <div class="book-item">
                        <div class="book-cover">
                            <img src="img/book.png"/>
                        </div>
                        <div class="book-info">
                            <span class="book-title">盗墓笔记</span>
                            <div class="author">南派三叔</div>
                            <p>南派三叔经典作品，讲述了盗墓的故事，深受读者的喜爱，我相信每个男孩子都会喜欢这本小说的。</p>
                            <div class="like">
                                <i class="iconfont icon-Like"></i>666
                            </div>
                        </div>
                    </div>
                    <div class="book-item">
                        <div class="book-cover">
                            <img src="img/book.png"/>
                        </div>
                        <div class="book-info">
                            <span class="book-title">盗墓笔记</span>
                            <div class="author">南派三叔</div>
                            <p>南派三叔经典作品，讲述了盗墓的故事，深受读者的喜爱，我相信每个男孩子都会喜欢这本小说的。</p>
                            <div class="like">
                                <i class="iconfont icon-Like"></i>666
                            </div>
                        </div>
                    </div>
                </div>
                <div class="book-box">
                    <div class="book-item">
                        <div class="book-cover">
                            <img src="img/book.png"/>
                        </div>
                        <div class="book-info">
                            <span class="book-title">盗墓笔记</span>
                            <div class="author">南派三叔</div>
                            <p>南派三叔经典作品，讲述了盗墓的故事，深受读者的喜爱，我相信每个男孩子都会喜欢这本小说的。</p>
                            <div class="like">
                                <i class="iconfont icon-Like"></i>666
                            </div>
                        </div>
                    </div>
                    <div class="book-item">
                        <div class="book-cover">
                            <img src="img/book.png"/>
                        </div>
                        <div class="book-info">
                            <span class="book-title">盗墓笔记</span>
                            <div class="author">南派三叔</div>
                            <p>南派三叔经典作品，讲述了盗墓的故事，深受读者的喜爱，我相信每个男孩子都会喜欢这本小说的。</p>
                            <div class="like">
                                <i class="iconfont icon-Like"></i>666
                            </div>
                        </div>
                    </div>
                </div>
                <div class="book-box">
                    <div class="book-item">
                        <div class="book-cover">
                            <img src="img/book.png"/>
                        </div>
                        <div class="book-info">
                            <span class="book-title">盗墓笔记</span>
                            <div class="author">南派三叔</div>
                            <p>南派三叔经典作品，讲述了盗墓的故事，深受读者的喜爱，我相信每个男孩子都会喜欢这本小说的。</p>
                            <div class="like">
                                <i class="iconfont icon-Like"></i>666
                            </div>
                        </div>
                    </div>
                    <div class="book-item">
                        <div class="book-cover">
                            <img src="img/book.png"/>
                        </div>
                        <div class="book-info">
                            <span class="book-title">盗墓笔记</span>
                            <div class="author">南派三叔</div>
                            <p>南派三叔经典作品，讲述了盗墓的故事，深受读者的喜爱，我相信每个男孩子都会喜欢这本小说的。</p>
                            <div class="like">
                                <i class="iconfont icon-Like"></i>666
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="title-box">
                    <i class="iconfont icon-rank"></i>
                    <span>借阅排行榜</span>
                </div>
                <ul class="list-group rank-box">
                    <li class="list-group-item">
                        <span class="rank-else rank-c1">1</span>
                        <span class="rank-name">刘某人</span>
                        <span class="rank-num">696本</span>
                    </li>
                    <li class="list-group-item">
                        <span class="rank-else rank-c2">2</span>
                        <span class="rank-name">吴某人</span>
                        <span class="rank-num">695本</span>
                    </li>
                    <li class="list-group-item">
                        <span class="rank-else rank-c3">3</span>
                        <span class="rank-name">何某人</span>
                        <span class="rank-num">691本</span>
                    </li>
                    <li class="list-group-item">
                        <span class="rank-else">4</span>
                        <span class="rank-name">x某人</span>
                        <span class="rank-num">687本</span>
                    </li>
                    <li class="list-group-item">
                        <span class="rank-else">5</span>
                        <span class="rank-name">y某人</span>
                        <span class="rank-num">61本</span>
                    </li>
                    <li class="list-group-item">
                        <span class="rank-else">6</span>
                        <span class="rank-name">y某人</span>
                        <span class="rank-num">61本</span>
                    </li>
                    <li class="list-group-item">
                        <span class="rank-else">7</span>
                        <span class="rank-name">y某人</span>
                        <span class="rank-num">61本</span>
                    </li>
                    <li class="list-group-item">
                        <span class="rank-else">8</span>
                        <span class="rank-name">y某人</span>
                        <span class="rank-num">61本</span>
                    </li>
                    <li class="list-group-item">
                        <span class="rank-else">9</span>
                        <span class="rank-name">y某人</span>
                        <span class="rank-num">61本</span>
                    </li>
                    <li class="list-group-item">
                        <span class="rank-else">10</span>
                        <span class="rank-name">y某人</span>
                        <span class="rank-num">61本</span>
                    </li>
                </ul>
            </div>
        </div>

    </div>
    <div class="title-box" id="book_sheet">
        <i class="iconfont icon-neirongyi"></i>
        <span>迷你书架</span>
    </div>
    <div class="book-area">
        <!--        <div class="fast-search">-->
        <!--            <i class="iconfont icon-kuaijiegongju_1"></i>-->
        <!--            <span>快速搜索</span>-->
        <!--        </div>-->
        <div class="row mb-2 pt-2">
            <div class="col-2">
                <select class="form-control" id="bookType" onchange="bookTypeChange(this)">
                </select>
            </div>
            <div class="col-4">
                <div class="input-group">
                    <div class="input-group-text">
                        <i class="iconfont icon-search"></i>
                    </div>
                    <input class="form-control" placeholder="书名/作者/出版日期" type="search" id="searchInput">
                    <button class="btn btn-outline-secondary text-nowrap ml-1" onclick="searchBook()">搜索</button>
                </div>
            </div>
        </div>
        <div id="bookContainer">
        </div>
        <div class="fixed-table-pagination mt-2">
            <div class="float-right pagination" id="bookPageNav">
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="user_login">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">用户登录</h5>
                <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="input-group mb-3">
                    <span class="input-group-text iconfont icon-yonghu"></span>
                    <input class="form-control" placeholder="用户名" type="text" name="usr">
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text iconfont icon-mima"></span>
                    <input class="form-control" placeholder="密码" type="password" name="pwd">
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal" type="button">关闭</button>
                <button class="btn btn-primary" onclick="login()" type="button">登录</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="user_register">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">用户注册</h5>
                <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="input-group mb-3">
                    <span class="input-group-text iconfont icon-yonghu"></span>
                    <input class="form-control" placeholder="姓名" type="text" name="username" maxlength="20">
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text iconfont icon-email"></span>
                    <input class="form-control" placeholder="邮箱" type="email" name="email">
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text iconfont icon-shoujihao1"></span>
                    <input class="form-control" placeholder="手机号" type="number" name="phone">
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text iconfont icon-xuehao"></span>
                    <input class="form-control" placeholder="学号" type="number" name="stdId">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <i class="iconfont icon-xueyuan input-group-text"></i>
                    </div>
                    <select class="custom-select" id="college" onchange="getProf1()">

                    </select>
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <i class="iconfont icon-zhuanyemingcheng input-group-text"></i>
                    </div>
                    <select class="custom-select" id="prof">
                    </select>
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text iconfont icon-mima"></span>
                    <input class="form-control" placeholder="密码" type="password" name="reg_pwd">
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal" type="button">关闭</button>
                <button class="btn btn-primary" type="button" onclick="register()">注册</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="book_or_record">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">图书预定</h5>
                <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="mb-2">
                    <span class="font-weight-bold">图书名：</span> <span id="booking_book_name" class="text-muted"></span>
                </div>
                <div class="mb-2">
                    <span class="font-weight-bold">作者：</span><span id="booking_book_author" class="text-muted"></span>
                </div>
                <div class="mb-2">
                    <span class="font-weight-bold">摘要：</span> <span id="booking_book_descr" class="text-muted"></span>
                </div>
                <div>
                    <input name="booking_book_id" type="hidden"></input>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal" type="button">关闭</button>
                <button class="btn btn-primary" type="button" onclick="addBooking()">预定</button>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery3.6.js"></script>
<script src="js/jquery-cookie.js"></script>
<script src="js/md5.js"></script>
<script src="js/common.js"></script>
<script src="js/bootstrap4x.js"></script>
<script src="js/tx1.js"></script>
<script src="js/tx3.js"></script>
<script>
    var popover
    var g_cid = 0
    var bookListPageConfig = {
        curPage: 1,
        rowSize: 3,
        pageSize: 18,
        pageNum: 0,
        limitPage: 10
    }
    getCategory()
    getCollege1()
    getPageBookList(0)
    $("#myCenterBtn").on('click', function () {
        location.href = 'template/userArea.html'
    })

    // 挂载事件
    function goEvent() {
        var popObj = $(".book-item");
        $('.book-cover,.book-title').on('click', function () {
            var bname = $(this).parent().find(".book-title").text();
            var bauthor = $(this).parent().find(".author").text();
            var bdescr = $(this).parent().find("p").text();
            var bid = $(this).parent().find("input[name=book_id]").val();
            console.log(bid);
            $('#booking_book_name').text(bname);
            $('#booking_book_author').text(bauthor);
            $('#booking_book_descr').text(bdescr);
            $('input[name=booking_book_id]').val(bid);
            $('#book_or_record').modal({
                show: true
            });
        })
        $('.like').on('click', function () {

        })
        popObj.mouseenter(function () {
            var descr = $(this).find("p").text();
            console.log(descr);
            let options = {
                placement: 'top',
                title: '图书简介',
                content: descr,
                customClass: 'test'
            }
            popover = $(this).popover(options)
            popover.popover("show")
        })
        popObj.mouseleave(function () {
            popover.popover("dispose")
        })
    }

    // 搜索
    function searchBook() {
        let content = $("#searchInput").val()
        getPageBookList(g_cid, content)
    }

    // 图书类别更改
    function bookTypeChange(value) {
        bookListPageConfig["curPage"] = 1
        let cid = $(value).find('option:selected').val()
        g_cid = cid
        getPageBookList(cid)
    }

    // 获取专业
    function getProf1() {
        let cid = $("#college").val()
        let data = getProf(cid)
        let htmlStr = "<option selected value=\"0\">请选择专业</option>"
        for (let i of data) {
            htmlStr += `<option value="${i["id"]}">${i["name"]}</option>`
        }
        $("#prof").html(htmlStr)
    }

    // 获取 college
    function getCollege1() {
        let data = getCollege()
        let htmlStr = "<option selected value=\"0\">请选择学院</option>"
        for (let i of data) {
            htmlStr += `<option value="${i["id"]}">${i["name"]}</option>`
        }
        $("#college").html(htmlStr)
    }

    // 获取图书类别
    function getCategory() {
        let data = getAllCategory()
        let htmlStr = "<option value='0'>全部类型</option>"
        for (let i of data) {
            htmlStr += `<option value="${i["cid"]}">${i["cname"]}</option>`
        }
        $("#bookType").html(htmlStr)
    }

    function loginStatus() {
        let userInfo = $.cookie("user_info")
        if (userInfo !== undefined) {
            console.log(userInfo);
            userInfo = JSON.parse(userInfo)
            $("#loginBtn").css("display", "none")
            $("#regBtn").css("display", "none")
            $("#myCenterBtn").removeClass("d-none")
            $("#exitBtn").removeClass("d-none")
            $("#userTx").text(userInfo["name"].substring(0, 1))
            user_info = userInfo
        } else {
            $("#loginBtn").css("display", "block")
            $("#regBtn").css("display", "block")
            $("#myCenterBtn").addClass("d-none")
            $("#exitBtn").addClass("d-none")
            $("#exitBtn").removeClass("d-flex")
            user_info = null;
        }
    }

    function userArea() {
        location.href = 'template/userArea.html'
    }

    // 分页样式
    // 代办：页数不够隐藏上一页下一页等细节优化
    function renderPage(id, config, pageChangeFunc) {
        let curPage = config.curPage
        let preFlag = config.curPage !== 1
        let apFlag = config.pageNum !== config.curPage
        let addLis = (liSrts) => {
            let html = `<ul class="pagination">`
            html += `<li class="page-item page-pre" onclick="${pageChangeFunc}(1)"><a aria-label="首页" class="page-link">‹‹</a>
                        </li>`
            if (preFlag) {
                html += `
 <li class="page-item page-pre" onclick="${pageChangeFunc}(${curPage - 1})"><a aria-label="上一页" class="page-link">‹</a>
                        </li>`
            }
            html += liSrts
            if (apFlag) {
                html += `<li class="page-item page-next" onClick="${pageChangeFunc}(${curPage + 1})"><a aria-label="下一页"
                                                                                                     class="page-link">›</a>
                    </li>`
            }
            html += `<li class="page-item page-pre" onclick="${pageChangeFunc}(${config.pageNum})"><a aria-label="末页" class="page-link">››</a>
                        </li></ul>`
            return html
        }
        /*
        <li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
                        </li>
                        <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
                        <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
         */
        let lis = ``
        let pn = config.pageNum
        let epage = config.limitPage
        let ep = 0
        let sp = 1
        if (curPage + epage <= pn) {
            ep = curPage + epage
        } else {
            ep = pn
        }
        sp = curPage
        if (pn <= epage) {
            sp = 1
        }
        for (; sp <= ep; sp++) {
            if (sp == curPage) {
                lis += `<li class="page-item active" onclick="${pageChangeFunc}(${sp}, this)"><a class="page-link">${sp}</a></li>`
            } else {
                lis += `<li class="page-item" onclick="${pageChangeFunc}(${sp}, this)"><a class="page-link">${sp}</a></li>`
            }
        }
        let htmlStr = addLis(lis)
        console.log(htmlStr)
        $("#" + id).html(htmlStr)
    }


    //
    function bookListPageChange(p) {
        bookListPageConfig.curPage = p
        getPageBookList(g_cid)
    }

    // 渲染数据
    function renderBookList(arr) {
        let len = arr.length
        let rows = Math.round(len / bookListPageConfig.rowSize)
        let addItem = (itemStr) => {
            return `<div class="book-box">` + itemStr + `</div>`
        }
        let htmlStr = ``
        let itemStrs = ``
        let itemStr = (val1, val2, val3, val4, val5, val6, val7) => {
            return `<div class="book-item">
<input name="book_id" type="hidden" value="${val6}">
                    <div class="book-cover">
                        <img src="${val5}"/>
                    </div>
                    <div class="book-info">
                        <span class="book-title">${val1}</span>
                        <div class="author">${val2}</div>
                        <p>${val3}</p>
                        <div class="text-info">${val7}</div>
                    </div>
                </div>`
        }
        /*
        <div class="like">
                            <i class="iconfont icon-Like"></i>${val4}
                        </div>
         */
        let flag = 0
        for (let i = 0; i < len; i++) {
            if (flag == 3) {
                htmlStr += addItem(itemStrs)
                itemStrs = ``
                flag = 0
            }
            if (i == len - 1) {
                itemStrs += itemStr(arr[i]["bookName"], arr[i]["author"]
                    , arr[i]["descr"], 666, arr[i]["bookCover"]
                    , arr[i]["bookId"], getCname(arr[i]["class_"]))
                htmlStr += addItem(itemStrs)
                break
            }
            itemStrs += itemStr(arr[i]["bookName"], arr[i]["author"], arr[i]["descr"], 666
                , arr[i]["bookCover"], arr[i]["bookId"], getCname(arr[i]["class_"]))
            flag += 1
        }
        $("#bookContainer").html(htmlStr)
        goEvent()
    }

    // 分页获取图书数据
    function getPageBookList(cid = -1, searText = "") {
        let data = {
            key: "getBookList",
            curPage: bookListPageConfig["curPage"],
            pageSize: bookListPageConfig["pageSize"],
            cid: cid,
            searText: searText
        }
        $.ajax({
            url: "http://localhost:8080/book",
            data: data,
            method: "post",
            success(data) {
                console.log(data)
                if (data.code === 10001) {
                    renderBookList(data["data"][0])
                    bookListPageConfig.pageNum = data["data"][1]["totalPage"]
                    renderPage("bookPageNav", bookListPageConfig, "bookListPageChange")
                }
            },
            error(XMLHttpRequest, textStatus, errorThrown) {
                console.log("ajax 请求失败");
            }
        })
    }

    // 登录
    function login() {
        let data = {
            stdId: $("input[name=usr]").val(),
            pwd: $("input[name=pwd]").val(),
            key: "login"
        }
        $.ajax({
            url: "http://localhost:8080/reader",
            data: data,
            method: "post",
            success(data) {
                if (data.code === 10001) {
                    user_info = data["data"]
                    $("#user_login").modal("hide")
                    // 记住登录状态
                    $.cookie("user_info", JSON.stringify(user_info), {domain: "localhost", path: "/"})
                    loginStatus()
                } else {
                    alert("登录失败")
                }
            },
            error(XMLHttpRequest, textStatus, errorThrown) {
                alert("登录失败")
                console.log("ajax 请求失败");
            }
        })
    }

    // 执行注册
    function register() {
        let data = {
            name: $("input[name=username]").val(),
            email: $("input[name=email]").val(),
            phone: $("input[name=phone]").val(),
            stdId: $("input[name=stdId]").val(),
            pwd: $("input[name=reg_pwd]").val(),
            college: $("#college option:selected").val(),
            professional: $("#prof option:selected").val(),
            key: "register"
        }
        if (check(data)) {
            // success
            $.ajax({
                url: "http://localhost:8080/reader",
                data: data,
                method: "post",
                success(data) {
                    console.log(data)
                    if (data.code === 10001) {
                        console.log("注册成功");
                        if (confirm("注册成功，是否前往登录？")) {
                            // 打开登录
                            $("#user_register").modal("hide")
                            $("#user_login").modal("show")
                        }
                    } else {
                        alert("注册失败")
                        console.log("注册失败");
                    }
                },
                error(XMLHttpRequest, textStatus, errorThrown) {
                    alert("注册失败")
                    console.log("ajax 请求失败");
                }
            })
        } else {
            // fail
        }
    }

    //新增预定书本
    function addBooking() {
        var bookId = $('input[name=booking_book_id]').val();
        var id = user_info.id;
        console.log(user_info)
        console.log(bookId);
        let data = {
            "bookId": bookId,
            "id": id
        }
        $.ajax({
            url:"http://localhost:8080/booking?key=addBooking",
            data:data,
            success(data){
                if(data.code == 10001){
                    console.log("预定成功！")
                    alert("预定成功！")
                    $("#book_or_record").modal("hide")
                }else {
                    console.log("预定失败! ")
                    alert("预定失败！")
                }
            }
        })
    }
</script>
</body>
</html>
